<template>
  <div class="container-fluid">
    <div class="top-side-fixed">
      <TopSide />
    </div>
    <div class="row" style="margin-top: 100px;"> <!-- 顶部边距与 TopSide 的高度一致 -->
      <div class="col-1">
        <div class="offcanvas-fixed">
          <OffCanvas />
        </div>
      </div>
      <div class="col-10" style="font-size: 0.9rem;">
        <LabConsole />
      </div>
      <div class="col-1 d-flex justify-content-end">
        <RightCanvas />
      </div>
    </div>
  </div>
</template>

<style scoped>
.top-side-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* TopSide 的高度 */
  z-index: 0; /* 确保在最上面 */
}

.offcanvas-fixed {
  position: fixed;
  top: 70px; /* 与 TopSide 的高度一致 */
  left: 0;
  width: 8.33%; /* col-1 的宽度大约是 8.33% */
  height: calc(100vh - 60px); /* 减去 TopSide 的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  z-index: 1060; /* 确保在 TopSide 下面 */
}

/* 媒体查询适配不同设备 */
@media (max-width: 768px) {
  .top-side-fixed {
    height: 50px; /* 在小屏幕上调整 TopSide 的高度 */
  }
  .offcanvas-fixed {
    top: 50px; /* 与调整后的 TopSide 高度一致 */
    width: 100%; /* 在小屏幕上，OffCanvas 可以占满整个宽度 */
    height: calc(100vh - 50px); /* 减去调整后的 TopSide 高度 */
  }
}
</style>

<script lang="ts">
import { defineComponent } from 'vue';
import OffCanvas from '@/components/OffCanvas.vue'; // @ is an alias to /src
import TopSide from '@/components/TopSide.vue';
import LabConsole from '@/components/LabConsole.vue';
import RightCanvas from '@/components/RightCanvas.vue';

export default defineComponent({
  name: 'LabConsoleView',
  components: {
    OffCanvas,
    TopSide,
    LabConsole,
    RightCanvas
  },
});
</script>